<template>
  <div class="mine-wrap">
    <div class="bg-box">
      <div class="mine-box">
        <div class="avatar-con">
          <img :src="avatar" class="pic1" @click="showPic(avatar)" onclick="return false"/><img :src="gender"
                                                                                                class="pic2"/>
        </div>

        <div class="user-box">
          <span class="nickname">{{nickname}}（{{workStatus}}）</span>
          <img :src="level" class="pic4" onclick="return false"/>

          <div class="suffer-explain" @click="sufferPage">
            <van-progress :percentage="emValue > 45000 ? 100 : percentage" color="#FFDE59" :show-pivot="false"
                          class="suffer-line"/>
            <div class="suffer-box">
              <span class="num">当前经验值：{{emValue}}</span>
              <div class="grade-box" v-if="emValue < 45000">
                <span class="grade">{{upEmValue}}</span>
                <img src="./upgrade.png" class="pic5" onclick="return false"/>
              </div>
            </div>
          </div>
        </div>

        <div class="sign-box" @click="sign">
          <img src="./sign.png" class="pic3" v-if="signTitle!='已签到'" onclick="return false"/>
          <span class="sign">{{signTitle}}</span>
        </div>

      </div>

      <div class="score-box">
        <div class="score" @click="scorePage">
          <img src="./integral.png" class="pic6" onclick="return false"/>
          <span class="total">积分:{{score}}</span>
        </div>
        <img src="./btn_edit.png" class="pic7" @click="edit" onclick="return false"/>
      </div>

    </div>


    <div class="mine-con">

      <div class="item-box">
        <div class="item-con" @click="toPage('/activitypage')">
          <img src="./me_01.png" class="item-pic" onclick="return false"/>
          <span class="item-title">活动中心</span>
        </div>
        <div class="item-con" @click="toPage('/lucky')">
          <img src="./me_02.png" class="item-pic" onclick="return false"/>
          <span class="item-title">幸运积分</span>
        </div>
        <div class="item-con" @click="toPage('/reward')">
          <img src="./me_03.png" class="item-pic" onclick="return false"/>
          <span class="item-title">邀请奖励</span>
        </div>
        <div class="item-con">
          <div class="msg-box" @click="toPage('/system')">
            <img src="./me_04.png" class="item-pic" onclick="return false"/>
            <span class="msg" v-if="infoNum">{{infoNum}}</span>
          </div>
          <span class="item-title">消息中心</span>
        </div>
      </div>

      <div class="content-box">
        <div class="content-con" @click="toPage('/modifypwd')">
          <span class="title">密码修改</span>
          <img src="../../../images/in.png" class="pic8" onclick="return false"/>
        </div>
        <div class="content-con" @click="toPage('/service')">
          <span class="title">专属客服</span>
          <img src="../../../images/in.png" class="pic8" onclick="return false"/>
        </div>
      </div>

      <div class="download-box" @click="download">下载蓝聘APP</div>
    </div>


  </div>
</template>

<script>
  import alert from '../../../components/dialog/alert'
  import {baseUrl} from "../../../common/js/env"
  import {ImagePreview} from 'vant'
  import {getUrlKey, setSessionStore, setStore, getStore} from "../../../common/js/util"
  import Cookies from 'js-cookie'

  export default {
    data() {
      return {
        userSign: "",
        avatar: require("./avatar.png"),
        gender: require("./male.png"),
        nickname: "",
        workStatus: "",
        score: "",
        signTitle: "",
        grade: "",
        sex: "",
        birthday: "",
        marry: "",
        work: "",
        workYear: "",
        post: "",
        money: "",
        infoNum: "",
        problem: "",
        modal: false,
        emValue: "",
        upEmValue: "",
        downEmValue: "",
        percentage: 0,
        id: "",
        withdraw: "",
        identity: getUrlKey("identity")
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.id = getUrlKey("id");//微信登录跳转
      if (this.id) {
        sessionStorage.setItem("user_sign", base64.encode(this.id));
        this.initLogin(base64, this.id);
      }
      this.userSign = base64.decode(sessionStorage.getItem("user_sign"));
      this.queryMsgNum();
      this.querySign();
      this.queryMaterial();
    },
    methods: {
      initLogin(base64, id) {
        this.withdraw = base64.decode(getStore("withdraw_sign")); //判断不同的用户
        setStore("withdraw_sign", base64.encode(id));//验证不同用户登录后提现密码次数的问题

        if (id != this.withdraw) { //不是当前用户清除十分钟次数和cookie的时间
          localStorage.removeItem("sess_time_local");
          Cookies.remove("sess_time_local", "", {
            expires: -1,
            path: ''
          })
        }
        if (this.identity) {
          setSessionStore("identity", this.identity)
        }
      },
      showPic(pic) {//预览
        ImagePreview([pic]);
      },
      queryMaterial() {//获取个人资料
        this.$vux.loading.show({
          text: '加载中',
        });
        this.axios.get(baseUrl + "/userMaterial/select?sgin=" + this.userSign).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            let portrait = resultObj.data.user_url;//头像
            if (portrait) {
              this.avatar = portrait;
            }
            let sex = resultObj.data.user_sex;//性别(0/1男 2女)
            if (sex == 0 || sex == 1) {
              this.sex = 1;
              this.gender = require("./male.png");
            } else {
              this.sex = 2;
              this.gender = require("./female.png");
            }
            this.nickname = resultObj.data.user_name;//昵称

            let status = resultObj.data.workStatus;//工作状态
            if (status == 0) {
              this.workStatus = "待业";
            } else if (status == 1) {
              this.workStatus = "在职";
            } else {
              this.workStatus = "入职中";
            }
            this.score = resultObj.data.score;//积分
            this.grade = resultObj.data.grading;//等级
            this.birthday = resultObj.data.birthday;
            this.marry = resultObj.data.marry_status;
            this.work = resultObj.data.work_type;
            this.workYear = resultObj.data.work_years;
            this.post = resultObj.data.ideal_post;
            this.money = resultObj.data.ideal_money;
            this.emValue = resultObj.data.emValue;//用户当前经验值
            this.upEmValue = resultObj.data.upEmValue;//距离下一级所需要的经验值
            this.downEmValue = resultObj.data.downEmValue;//当前等级起始经验值
            this.percentage = Math.round((this.emValue - this.downEmValue) / (this.upEmValue - this.downEmValue) * 10000) / 100;//经验值百分比

            sessionStorage.setItem("avatar", portrait);
            sessionStorage.setItem("nickname", this.nickname);
            // this.$store.dispatch("updateUser",resultObj.data);
            sessionStorage.setItem("role", resultObj.data.role);
          } else {
            this.$vux.toast.text(resultObj.msg);
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      querySign() {//查询用户是否签到
        this.axios.get(baseUrl + "/userSign/selectCurIsSign?sgin=" + this.userSign).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0) {
            if (resultObj.data == 0) {
              this.signTitle = "签到";
            } else {
              this.signTitle = "已签到";
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      edit() {//编辑
        this.$router.push({
          path: "/material",
          query: {
            "avatar": this.avatar,
            "nickname": this.nickname,
            "birthday": this.birthday,
            "gender": this.sex,
            "marry": this.marry,
            "work": this.work,
            "workYear": this.workYear,
            "post": this.post,
            "money": this.money
          }
        });
      },
      sign() {//签到
        this.$router.push({path: "/sign", query: {"sign": this.userSign}});
      },
      toPage(path) {//跳转页面
        this.$router.push({path: path});
      },
      scorePage() {//积分说明
        this.$router.push({path: "/scoreexplain"});
      },
      sufferPage() {//经验值说明
        this.$router.push({path: "/sufferexplain"});
      },
      download() {//下载
        window.location.href = "https://url.cn/5AUAFDU";
      },
      queryMsgNum() {//查询消息未读数
        this.axios.get(baseUrl + "/info/query_unreadNum?sgin=" + this.userSign + "&type=1").then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0 && resultObj.data != null) {
            this.infoNum = resultObj.data > 99 ? 99 : resultObj.data;
          } else {
            this.$vux.toast.text(resultObj.msg);
          }
        });
      },
    },
    computed: {
      level() {//计算等级
        if (this.grade == "见习职工") {
          return require("../level1.png");
        } else if (this.grade == "初级职工") {
          return require("../level2.png");
        } else if (this.grade == "中级职工") {
          return require("../level3.png");
        } else if (this.grade == "高级职工") {
          return require("../level4.png");
        } else if (this.grade == "部门精英") {
          return require("../level5.png");
        } else if (this.grade == "部门经理") {
          return require("../level6.png");
        } else if (this.grade == "区域经理") {
          return require("../level7.png");
        } else if (this.grade == "总经理") {
          return require("../level8.png");
        } else {
          return require("../level9.png");
        }
      }
    },
    components: {
      "v-alert": alert,
      ImagePreview
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../common/stylus/mixin.styl"

  .mine-wrap
    wh(100%, 100%)
    overflow hidden
    .bg-box
      wh(100%, 4.533rem)
      bg-image("./bg.png", 100%, 100%)
      overflow: hidden
      .mine-box
        display: flex
        align-items: center
        margin-top: 0.747rem
        margin-bottom: 0.4rem
        wh(100%, 1.867rem)
        .avatar-con
          position: relative
          margin-left: 0.4rem
          margin-right: 0.427rem
          margin-bottom: 0.24rem
          wh(1.6rem, 1.6rem)
          background: rgba(246, 246, 246, 1)
          border: 0.053rem solid rgba(255, 255, 255, 0.3)
          border-radius(50%)
          .pic1
            wh(100%, 100%)
            border-radius(50%)
          .pic2
            position: absolute
            right: 0
            bottom: 0
            wh(0.36rem, 0.36rem)
        .user-box
          display: flex
          flex-direction: column
          .nickname
            margin-bottom: 0.307rem
            size-color(0.453rem, rgba(255, 255, 255, 1))
          .pic4
            margin-bottom: 0.213rem
            wh(1.693rem, 0.413rem)
          .suffer-line
            wh(4.547rem, 0.08rem)
            background: rgba(255, 255, 255, 1)
            border-radius: 0.04rem
            margin-bottom: 0.107rem
          .suffer-box
            display: flex
            align-items: center
            .num
              size-color(0.267rem, rgba(255, 255, 255, 1))
            .grade-box
              display: flex
              align-items: center
              margin-left: auto
              .grade
                margin-right: 0.053rem
                size-color(0.267rem, rgba(255, 255, 255, 1))
              .pic5
                wh(0.587rem, 0.32rem)
        .sign-box
          display: flex
          align-items: center
          justify-content: center
          margin-left: auto
          wh(2.107rem, 0.84rem)
          background: rgba(36, 153, 242, 1)
          border-top-left-radius: 0.413rem
          border-bottom-left-radius: 0.413rem
          .pic3
            margin-left: 0.2rem
            margin-right: 0.15rem
            wh(0.427rem, 0.427rem)
          .sign
            size-color(0.413rem, rgba(255, 255, 255, 1))
      .score-box
        display: flex
        align-items: center
        justify-content: space-between
        .score
          display: flex
          align-items: center
          margin-left: 0.4rem
          .pic6
            wh(0.48rem, 0.48rem)
          .total
            margin-left: 0.213rem
            size-color(0.347rem, rgba(255, 255, 255, 1))
        .pic7
          margin-right: 0.373rem
          wh(0.453rem, 0.453rem)
    .mine-con
      position: absolute
      top: 3.867rem
      wh(100%, auto)
      background: rgba(255, 255, 255, 1)
      border-top-left-radius: 0.48rem
      border-top-right-radius: 0.48rem
      .item-box
        display: flex
        padding-top: 0.627rem
        padding-bottom: 0.667rem
        .item-con
          display: flex
          flex-direction: column
          align-items: center
          flex: 1
          .item-pic
            wh(1.333rem, 1.333rem)
            padding-bottom: 0.107rem
          .item-title
            size-color(0.373rem, rgba(102, 102, 102, 1))
          .msg-box
            position: relative
            .item-pic
              wh(1.333rem, 1.333rem)
              padding-bottom: 0.107rem
            .msg
              fj(center, center)
              position: absolute
              top: -0.15rem
              right: -0.15rem
              wh(0.48rem, 0.48rem)
              size-color(0.32rem, rgba(255, 255, 255, 1))
              background: rgba(242, 78, 78, 1)
              border-radius(50%)
      .content-box
        wh(100%, auto)
        .content-con
          fj(space-between, center)
          wh(100%, 1.28rem)
          border-bottom: 0.027rem solid #f2f2f2
          .title
            margin-left: 0.373rem
            size-color(0.427rem, rgba(51, 51, 51, 1))
          .pic8
            margin-right: 0.373rem
            wh(0.32rem, 0.32rem)
      .download-box
        fj(center, center)
        margin: 0 auto
        margin-top: 1.84rem
        wh(90.4%, 1.28rem)
        background: rgba(60, 175, 255, 1)
        border: 0.013rem solid rgba(238, 238, 238, 1)
        border-radius(0.107rem)
        size-color(0.453rem, rgba(255, 255, 255, 1))
</style>
